<script setup lang="ts">
// 1:下载插件 @amap/amap-jsapi-loader   yarn add  @amap/amap-jsapi-loader
// 2:导入  import AMapLoader from '@amap/amap-jsapi-loader'
// 3:准备dom <div id="container"></div>  窗器要有宽高
// 4:准备密钥处理  window._AMapSecurityConfig = {    securityJsCode: '2ab045153d7d70af78a6d809ee228fb4' }
// 5:使用 在onMounted内使用
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted } from 'vue'
window._AMapSecurityConfig = {
  // 正常情况应密钥应该是后端给我们
  securityJsCode: '2ab045153d7d70af78a6d809ee228fb4'
}
onMounted(() => {
  AMapLoader.load({
    key: '3386b0052e924b9ca0376a236c52ac0d', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then(AMap => {
      const map = new AMap.Map('container', {
        //设置地图容器id
        viewMode: '3D', //是否为3D地图模式
        zoom: 12, //初始化地图级别
        center: [105.602725, 37.076636] //初始化地图中心点位置
      })
    })
    .catch(e => {
      console.log(e)
    })
})
</script>

<template>
  <div class="play-page">
    <div id="container"></div>
  </div>
</template>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
</style>
